import React from "react";
import {
  Card,
  Form,
  Input,
  Switch,
  Button,
  Select,
  Space,
  message,
} from "antd";

const Settings: React.FC = () => {
  const [form] = Form.useForm();

  const onFinish = (values: any) => {
    console.log("设置表单值:", values);
    message.success("设置保存成功！");
  };

  return (
    <Card title="系统设置">
      <Form
        form={form}
        layout="vertical"
        initialValues={{
          siteName: "React Admin",
          theme: "light",
          enableNotification: true,
          language: "zh_CN",
        }}
        onFinish={onFinish}
      >
        <Form.Item
          label="站点名称"
          name="siteName"
          rules={[{ required: true, message: "请输入站点名称" }]}
        >
          <Input placeholder="请输入站点名称" />
        </Form.Item>

        <Form.Item label="主题" name="theme">
          <Select>
            <Select.Option value="light">浅色</Select.Option>
            <Select.Option value="dark">深色</Select.Option>
          </Select>
        </Form.Item>

        <Form.Item label="语言" name="language">
          <Select>
            <Select.Option value="zh_CN">简体中文</Select.Option>
            <Select.Option value="en_US">English</Select.Option>
          </Select>
        </Form.Item>

        <Form.Item
          label="开启通知"
          name="enableNotification"
          valuePropName="checked"
        >
          <Switch />
        </Form.Item>

        <Form.Item>
          <Space>
            <Button type="primary" htmlType="submit">
              保存设置
            </Button>
            <Button onClick={() => form.resetFields()}>重置</Button>
          </Space>
        </Form.Item>
      </Form>
    </Card>
  );
};

export default Settings;
